<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的社群</title>
    <meta name="viewport" content=" initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="{$Think.config.RESOURCEURL}wx_assets/css/common.css{$Think.config.RESOURCE_VER}" rel="stylesheet">
    <script src="{$Think.config.RESOURCEURL}wx_assets/personCenter/js/mediaQuery.min.js{$Think.config.RESOURCE_VER}"></script>
    <script type='text/javascript' src='{$Think.config.RESOURCEURL}wx_assets/js/zepto.1.1.3.min.js{$Think.config.RESOURCE_VER}'></script>
    <script src="{$Think.config.RESOURCEURL}wx_assets/js/zepto.alert.js{$Think.config.RESOURCE_VER}" type="text/javascript"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script src="{$Think.config.RESOURCEURL}wx_assets/js/util.js{$Think.config.RESOURCE_VER}" type="text/javascript"></script>
    <script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/wx_share.js{$Think.config.RESOURCE_VER}"></script>
    <style>
        article {
            font-size: 0;
        }
        h3 {
            font-size: .3rem;
            height: .75rem;
            line-height: .75rem;
            color: #fff;
            background: #ff9900 ;
            text-align: center;
            position: fixed;
            top: 0;
            width: 100%;
            left: 0;
            z-index: 3;
        }
        h3 a{
            display: inline-block;
            position: absolute;
            height: .75rem;
            width: .7rem;
            left: 0;
            background: url({$Think.config.RESOURCEURL}wx_assets/commune/images/new_sj.png{$Think.config.RESOURCE_VER}) center center no-repeat;
            background-size: .17rem .32rem;
        }

        /* 浮动*/
        .fl {
            float: left;
        }
        .fr {
            float: right;
        }
        .clearfix:after {
            content: ".";
            display: block;
            clear: both;
            visibility: hidden;
            line-height: 0;
            height: 0;
            font-size:0;
        }
        .clearfix { *zoom:1;}
        #nums {
            margin-top: .75rem;
        }
        ul li {
            height: 1.2rem;
            line-height: 1.2rem;
            font-size: .26rem;
            color: #757575;
            background: #fff url({$Think.config.RESOURCEURL}wx_assets/commune/images/info_yy.png{$Think.config.RESOURCE_VER}) 98% center no-repeat;
            border-bottom: 1px solid #ccc;
            background-size: .91rem .63rem;
            position: relative;
        }
        ul li .fl span {
            display: inline-block;
            width: .7rem;
            height: .69rem;
            vertical-align: middle;
            margin: 0 .2rem 0 .1rem;
            background: url({$Think.config.RESOURCEURL}wx_assets/commune/images/my_group.png{$Think.config.RESOURCE_VER}) center center no-repeat;
            background-size: .7rem .69rem;
        }
        ul li .fl {
            width: 82%;
        }
        ul li .fl i {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            -webkit-transform: translateY(-50%);
            width: 50%;
            line-height: 1;
            display: inline-block;
            word-wrap: break-word;
        }
        ul li .fl em {
            display: inline-block;
            width: 1rem;
            font-size: .22rem;
            color: #ff9900;
            text-align: center;
            font-weight: 600;
        }
        ul li .fl em.top{
            background: url({$Think.config.RESOURCEURL}wx_assets/commune/images/top.png{$Think.config.RESOURCE_VER}) center no-repeat;
            font-weight: normal;
            color:#fff;
            background-size: 1rem .6rem;
            font-size: .18rem;
        }
        ul li .fr {
            width: 18%;
            line-height: normal;
            font-size: 0;
            height: 1.2rem;
            text-align: center;
        }
        ul li .fr p {
            line-height: normal;
            padding-top: .1rem;
            margin-top: .35rem;
            font-size: .14rem;
            color: #757575;
            text-align: center;
        }
        ul li .fr i {
            line-height: normal;
            font-size: .18rem;
            color: #ff9900;
            text-align: center;
        }
        .data-loading,.data-end{
            font-size:16px;
        }
    </style>
</head>
<body>
    <article>
        <h3>
            <a href="javascript:history.go(-1);"></a>
            社群指数排行榜
        </h3>
        <ul id="nums">
        </ul>
    </article>
    <script type="text/html" id="Tpl">
        <%if(results){%>
        <%for(var i=0;i<results.length;i++){
        var num = results[i];
        %>
        <li class="clearfix">
            <div class="fl">
                <%if(num.rowNo < 4){%>
                <em class="top">TOP<%=num.rowNo%></em>
                <%}else if(num.rowNo > 3 && num.rowNo < 11){%>
                 <em>TOP<%=num.rowNo%></em>
                <%} else{%>
                <em><%=num.rowNo%></em>
                <%}%>
                <span></span>
                <i><%=num.groupName%></i>
            </div>
            <div class="fr">
                <p>社群指数</p>
                <i><%=num.group_figure%></i>
            </div>
        </li>
        <%}}else{%>
        <div class="noMassage">暂无服务</div>
        <%}%>
    </script>
    <script>
        var baseUrl = '{$Think.config.SERVER_HOST}';
        var url = "{$Think.config.SERVER_HOST}call.json?customerId={$customerId}";
        var nums={
            pageSize:10,
            page:0,
            pageCount:0,
            init:function(){
                var me=this;
                this._initEvent();
                $.util.pageLoading.show();
                me._loadList(me.page,function(){
                    $.util.pageLoading.hide();
                });
            },
            _initEvent:function(){
                var me=this;
                $.util.initDataLoading({
                    me:nums,
                    lastChildren:function(){
                        return $("#nums li:last");
                    },
                    page:function(){
                        return nums.page;
                    },
                    pageCount:function(){
                        return nums.pageCount;
                    }
                });
            },
            _renderList:function(data,page,callback){
                var me=this;
                if(data){
                    var html=template("Tpl", data),
                            container = $("#nums");
                    container.append(html);
                    me.page+=me.pageSize;
                    me.pageCount=data.total;
                    callback && callback();
                }
            },
            _loadList:function(page,callback){
                var me=this;
                var data={
                    "start":nums.page,
                    "limit":nums.pageSize
                };
                $.ajax({
                    type: 'post',
                    url: url,
                    dataType: 'json',
                    data:{
                        'module':"commune",
                        "method":"comuneRankList",
                        "params":JSON.stringify(data)
                    },
                    success: function(data){
                        if(data){
                            me._renderList(data,page,callback);
                        }
                        $.util.pageLoading.hide();
                    },
                    error: function(xhr, type){
//            alert('Ajax error!')
                    }
                })
            }
        }
        nums.init();
        var shareUrl = "{$Think.config.SERVER_HOST}call.html?customerId={$customerId}&module=commune&method=comuneRankList";
        wx_share.init({
            "title":"社群排行榜",
            "desc":'点击查看排行榜',
            "link":shareUrl,
            "imgUrl": '{$Think.config.RESOURCEURL}wx_assets/commune/images/my_group.png{$Think.config.RESOURCE_VER}',
            "pkg":{
                "appId": '{$pkg.appId}',
                "timestamp": '{$pkg.timestamp}',
                "nonceStr": '{$pkg.nonceStr}',
                "signature": '{$pkg.signature}'
            }
        });
    </script>
</body>
</html>